<template>
	<n-config-provider
		:theme="appStore.theme === 'dark' ? darkTheme : lightTheme"
		:theme-overrides="appStore.theme === 'dark' ? darkThemeOverrides : lightThemeOverrides"
		:locale="locale"
		:date-locale="dateLocale">
		<n-message-provider :placement="isDesktop ? 'top-left' : 'top'">
			<app-lock v-if="appStore.lockShow" />
			<template v-else>
				<layout-main v-if="isDesktop"></layout-main>
				<layout-mobile v-else></layout-mobile>
				<layout-main-popups />
				<wallet-vue />
				<profile-binding />
				<wallet-validate />
				<app-cs class="md:flex hidden" />
				<base-dialog />
				<reward-popup />
				<sports-match-live />
				<search-game />
				<appLiveRankGameDetailCasino />
				<settings-popups />
				<app-language />
				<app-mobile-menu />
			</template>
		</n-message-provider>
	</n-config-provider>
	<div id="captcha"></div>
	<AppSocket />
</template>

<script setup lang="ts">
import AppLock from '@/views/app/lock/index.vue'
import AppSocket from '@/views/app/socket/index.vue'
import LayoutMain from '@/layouts/layout-main/index.vue'
import LayoutMobile from '@/layouts/layout-mobile/index.vue'
import LayoutMainPopups from '@/layouts/layout-main/layout-main-popups.vue'
import WalletValidate from '@/views/wallet/validate/index.vue'
import WalletVue from '@/views/wallet-new/index.vue'
import ProfileBinding from '@/views/profile/binding/index.vue'
import SportsMatchLive from '@/components/sports/sports-match-live/index.vue'
import AppCs from '@/components/app/app-cs/index.vue'
import BaseDialog from '@/components/base/dialog/index.vue'
import RewardPopup from '@/views/activity/components/reward-popup/index.vue'
import SearchGame from '@/components/search/index.vue'
import SettingsPopups from '@/views/settings/settings-popups/index.vue'
import appLiveRankGameDetailCasino from '@/components/app/app-live-rank/app-live-rank-game-detail/casino.vue'
import AppLanguage from '@/components/app/app-language/index.vue'
import AppMobileMenu from '@/components/app/app-mobile-menu/index.vue'
import { initApp, useTheme, useLang, getOS } from '@/utils'
import { darkTheme, lightTheme, NConfigProvider, NMessageProvider } from 'naive-ui'
import { darkThemeOverrides, lightThemeOverrides } from '@/plugins/naive-ui'
import { useAppStore } from './store'
import { useNaiveLocale, useScaleEffect } from '@/hooks'
import { isDesktop } from '@/hooks/useIsPC.ts'
initApp()
useTheme()
useLang()
useScaleEffect()

const appStore = useAppStore()

window.document.documentElement.setAttribute('system', getOS())

const { locale, dateLocale } = useNaiveLocale()
</script>

<style scoped lang="scss">
.n-config-provider {
	height: 100%;
}
</style>
